<template>
    <div class="block">
        <div class="page-title">
            <z-history :type="1"></z-history>
            <span>签到</span>
        </div>
        <div class="" v-show="Admin==true">
            <div class="signInfo">
                <div class="signKing">
                    <p class="price font1" v-if="ticketDetail.ticket && ticketDetail.ticket.price != 0 ">
                        {{ticketDetail.ticket.price/100}}元</p>
                    <p class="price font1" v-if="ticketDetail.ticket && ticketDetail.ticket.price == 0">免费</p>
                    <p class="price-des font1" v-if="ticketDetail.ticket">{{ticketDetail.ticket.name}}</p>
                </div>
                <div class="signTop">
                    <div class="signLeft">
                        <img :src="actDetail.newThumbs" alt="">
                    </div>
                    <div class="signRight">
                        <p>{{actDetail.activityTitle}}</p>
                    </div>
                </div>
                <div class="signBottom signback">
                    <p>姓名：{{ticketDetail.applyName}}</p>
                    <p>手机：{{ticketDetail.applyPhone}}</p>
                </div>
                <img class="signImg" v-if="handSign==false || imgStatus==2" src="../../assets/image/已签到.png" alt="">
                <img class="signImg" v-if="imgStatus==3" src="../../assets/image/已过期.png" alt="">
                <img class="signImg" v-if="imgStatus==4" src="../../assets/image/退票中.png" alt="">
                <img class="signImg" v-if="imgStatus==5" src="../../assets/image/已退票.png" alt="">
                <img class="signImg" v-if="imgStatus==8" src="../../assets/image/used.png" alt="">
                <!-- <img class="signImg" src="../../assets/image/不可用.png" alt=""> -->
                <!-- <img class="signImg" src="../../assets/image/以兑换.png" alt=""> -->
            </div>
            <!-- 兑换 -->
            <div class="sign btn1" v-if="handSign==true && imgStatus==1" @click="signClick()">签到</div>
            <div class="signAgain btn-line" v-if="handSign==false || imgStatus!=1" @click="signContinue()">继续签到</div>
        </div>
        <div class="adminfalse" v-if="Admin==false">
            <img src="../../assets/image/noadmin.png" alt="">
            <p>{{tipWords}}</p>
        </div>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {actService} from '../../service/activityService'

    export default {
        data() {
            return {
                Admin: null,
                signData: null,
                handSign: true,
                imgStatus: 1,
                signTicket: null,
                tipWords: '',
                checkadminId: null,
                wxTimestamp: null,
                appId: null,
                wxSignature: null,
                wxNoncestr: null,
                ticketDetail: {},
                actDetail: {},
                actId: null,
                tag: false
            }
        },
        mounted: function () {
            document.title = "签到页面"
            const that = this
            // alert('页面链接', encodeURIComponent(window.location.href))
            that.signApply() //请求手动扫二维码签到
            that.TicketPost() //根据票号请求票务信息
        },
        methods: {
            TicketPost: function () {
                const that = this
                actService.TicketNum({
                    ticketNo: that.$route.params.ticketNo
                }).then(function (res) {
                    that.ticketDetail = res.data.datas
                    // console.log(that.ticketDetail);
                    that.ActPost() //根据活动id请求活动信息
                })
            },
            ActPost: function () {
                const that = this
                actService.getActivities({
                    activityId: that.$route.params.actId,
                }).then(function (res) {
                    that.actDetail = that.getFormat(res.data.datas)
                })
            },
            getFormat: function (detailArr) {
                detailArr.newThumbs = this.$store.state.picHead + detailArr.activityPoster
                return detailArr
            },
            signApply: function () {
                const that = this
                if (that.tag) return;
                that.tag = true;
                actService.scanSign({
                    code: that.$route.params.code,
                    actId: that.$route.params.actId,
                    ticketNo: that.$route.params.ticketNo
                }).then(function (res) {
                    that.codeCheck(res.data) //判断code值
                    that.tag = false;
                })
            },
            codeCheck: function (param) {
                const that = this
                let code = param.code
                if (param.success) { //res.datas.myTicket res.datas.checkAdmin
                    that.signData = param.datas
                    that.signTicket = param.datas.myTicket
                    that.checkadminId = param.datas.checkAdmin.id
                    that.handSignCheck(that.signData.checkAdmin.everconfirmed) //是否手动签到
                    that.ticketStatus(that.signTicket.status); // 判断票的状态
                    that.Admin = true
                } else if (code == 529108) { //您没有签到权限,请联系活动举办方
                    that.Admin = false
                    that.tipWords = param.message
                } else if (code == 529100) { //请使用微信扫码签到
                    that.Admin = false
                    that.tipWords = param.message
                } else if (code == 529103) { //电子票不存在,请联系管理员
                    that.Admin = false
                    that.tipWords = param.message
                } else if (code == 529104) { //已使用
                    that.Admin = true
                    that.imgStatus = 8
                } else if (code == 529105) { //已过期
                    that.Admin = true
                    that.imgStatus = 3
                } else if (code == 529106) { //退票中
                    that.Admin = true
                    that.imgStatus = 4
                } else if (code == 529107) { //已退票
                    that.Admin = true
                    that.imgStatus = 5
                } else {
                    that.Admin = false
                    that.tipWords = param.message
                }
            },
            handSignCheck: function (items) {
                const that = this
                if (items == true) {
                    that.handSign = true
                } else {
                    that.handSign = false
                }
            },
            ticketStatus: function (item) {
                const that = this
                if (item == 1) {
                    that.imgStatus = 1
                } else if (item == 2) {
                    that.imgStatus = 2
                } else if (item == 3) {
                    that.imgStatus = 3
                } else if (item == 4) {
                    that.imgStatus = 4
                } else if (item == 5) {
                    that.imgStatus = 5
                }
            },
            signClick: function () {
                const that = this
                actService.handSign({
                    checkAdminId: that.checkadminId,
                    actId: that.$route.params.actId,
                    ticketNo: that.$route.params.ticketNo
                }).then(function (res) {
                    if (res.data.success) {
                        that.Admin = true
                        that.imgStatus = 2
                    }
                })
            },
            signContinue: function () { // 获取微信信息
                const that = this
                that.weChatPhoto() //调用 微信扫码接口
            },
            weChatPhoto: function () {
                const that = this
                    appService.getWxJssdk().then(function () {
                        wx.ready(function () {
                            wx.scanQRCode({
                                needResult: 1,
                                desc: 'scanQRCode desc',
                                success: function (res) {
                                }
                            });
                        });
                        wx.error(function (res) {//错误时调用
                            alert('err')
                        });
                    })
            }
        }
    }
</script>
<style lang="less">
    @import url('../../assets/css/base.less');

    html {
        background: #f4f4f4;
    }

    .block {
        background: #f4f4f4;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .page-title {
            z-index: 20;
            width: 100%;
            height: 1.3333rem;
            line-height: 1.3333rem;
            font-size: 0.48rem;
            position: fixed;
            top: 0;
            max-width: 450px;
            margin: 0 auto;
            right: 0;
            left: 0;
            color: #333;
            letter-spacing: 0.3px;
            text-align: center;
            background: #FFF;
            box-shadow: inset 0 -1px 0 0 rgba(221, 221, 221, 0.50);
        }
        .page-title .back {
            position: absolute;
            left: 0.533rem;
        }
        .adminfalse {
            img {
                width: @size50;
                margin: 0 auto;
                margin-top: 6rem;
                margin-left: 50%;
                transform: translateX(-50%);
            }
            p {
                text-align: center;
                margin-top: .533rem;
                font-size: 16px;
                color: #666666;
            }
        }
        .signInfo {
            position: relative;
            margin-top: 1.55rem;
            margin-left: @size15;
            margin-bottom: @size40;
            width: @size345;
            height: 7.52rem;
            background: #FFFFFF;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
        }
        .signImg {
            position: absolute;
            transform: rotate(-15deg);
            width: 2.666rem;
            bottom: @size20;
            right: @size40;
        }
        .signKing {
            padding: @size30 0;
            width: 100%;
            height: auto;
            .price {
                line-height: 56px;
                text-align: center;
                font-size: @size40;
                color: #6699FF;
            }
            .price-des {
                text-align: center;
                font-size: @size15;
                color: #666666;
            }
        }
        .signTop {
            height: 1.573rem;
            padding: 0 @size15 @size30 @size15;
            .signLeft {
                float: left;
                width: 2.4rem;
                height: 1.573rem;
                border: 1px solid #eeeeee;
                overflow: hidden;
                position: relative;
                img {
                    height: 100%;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .signRight {
                width: 5.7rem;
                float: right;
                font-size: @size14;
                color: #333333;
                p {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
            }
        }
        .signBottom {
            background: #F3FAFF;
            padding: .3rem .4rem;
            p {
                font-size: @size12;
                line-height: @size20;
                color: #666666;
            }
        }
        .sign {
            text-align: center;
            margin: 0 auto;
            width: @size345;
            height: @size45;
            line-height: @size45;
            background: #6699FF;
            // border: 1px solid #6699FF;
            border-radius: 100px;
            font-size: @size18;
            color: #FFFFFF;
        }
        .signAgain {
            text-align: center;
            margin: 0 auto;
            width: @size345;
            height: @size45;
            line-height: @size45;
            background: #FFFFFF;
            border: 1px solid #6699FF;
            border-radius: 100px;
            font-size: @size18;
            color: #6699FF;
        }
    }

</style>

